<script setup>
import { ref, reactive } from "vue"
import { captchaApi, loginApi } from "@/api/user"
import { useRouter } from "vue-router"

const router = useRouter();
// 定义验证码
const captchaUrl = ref("");
// 定义每个验证码对应的key值
const captchaKey = ref("");

const ruleFormRef = ref("");
// 定义表单
const ruleForm = reactive({
    username: "",
    password: "",
    captcha: "",
    key: ""
});

// 表单效验
const rules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    captcha: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
    ],

})

// 获取验证码
captchaApi().then(res => {
    // console.log(res);
    captchaUrl.value = res.data.img;
    captchaKey.value = res.data.key;
    // console.log(captchaKey.value);

});

// 点击切换验证码
const captchaFn = () => {
    captchaApi().then(res => {
        // console.log(res);
        captchaUrl.value = res.data.img;
        captchaKey.value = res.data.key;
    })
}


// 提交按钮
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            // 登录验证
            // console.log(ruleForm);
            ruleForm.key = captchaKey.value
            // console.log(ruleForm.key);

            loginApi(ruleForm).then(res => {
                console.log(res);
                if (res.data.errNo == 0) {
                    localStorage.setItem("acl", JSON.stringify(res.data.context.acl));
                    localStorage.setItem("jwt", res.data.context.jwt);
                    router.push("/dashboard")
                }
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}
</script>

<template>
    <div class="formBox">
        <div class="login">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                size="default" status-icon>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="验证码" prop="captcha">
                    <el-space>
                        <el-input v-model="ruleForm.captcha" placeholder="验证码" />
                        <div @click="captchaFn">
                            <img :src="captchaUrl" alt="">
                        </div>

                    </el-space>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<style scoped lang="scss">
.formBox {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .login {
        display: flex;
        width: 400px;
        background-color: pink;

        .el-form {
            margin-top: 20px;
        }
    }
}
</style>